import React, { Component } from 'react';
import './subscribe.css';
import { Modal , Toast} from 'antd-mobile';
import { get , post} from '../../Lib/Http';
import apiUrl from '../../Config/web';

class Subscribe extends Component {

    constructor(props) {
        super(props);
        this.state = {
          modal1: false,
          amount:0,
          cost:0,
          text:this.props.text
        };
    }

    closest(el, selector) {
        const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
        while (el) {
          if (matchesSelector.call(el, selector)) {
            return el;
          }
          el = el.parentElement;
        }
        return null;
    }


    showModal = key => (e) => {

        e.preventDefault(); // 修复 Android 上点击穿透

        if(this.props.text === 1){
            return;
        }

        Toast.loading('Loading...', 20);

        let that = this;

        get(apiUrl.userInfo, {}, function(response){

            Toast.hide();

            let data = response.data;

            if(data.code === 1000){
                that.props.history.push('/login');
                return;
            }

            if(data.code === 0){
 
                let amount = parseInt(data.data.amount);

                let cost = that.props.price;
                if(data.data.is_vip === 1 ){
                    cost = that.props.vipPrice;
                }


                that.setState({
                    [key]: true,
                    amount:amount,
                    cost:cost,
                });

            }


        }, function(error){

            Toast.hide();
        });


        

        
    }
    

    
    onClose = key => () => {
        this.setState({
          [key]: false,
        });
    }

    buyBook(){
        this.onClose('modal1')();

        Toast.loading('loading', 100);

        let that = this;

        post(apiUrl.buy,{
            'id':this.props.url
        },function(success){
            Toast.hide();
            
            let data = success.data;

            if(data.code === 0){
                Toast.success('购买成功', 1);
                that.props.setBuy(1);
                that.setState({
                    text:1
                });
                return;
            }


            if(data.code !== 0){
                Toast.offline(data.msg, 2);
                return;
            }


        }, function(error){
            Toast.hide();
        })


    }


    onWrapTouchStart = (e) => {
        // fix touch to scroll background page on iOS
        if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
          return;
        }
        const pNode = this.closest(e.target, '.am-modal-content');
        if (!pNode) {
          e.preventDefault();
        }
    }

    toRecharge(e){
        this.props.history.push('/recharge');

        return;
    }


    render() {

        let text = this.state.text ? '已购买' : '购买';

        return (
            <div className="subscribe">

                <Modal
                visible={this.state.modal1}
                transparent
                maskClosable={false}
                onClose={this.onClose('modal1')}
                title="购买试卷"
                footer={[
                    { text: '取消', onPress: () => { this.onClose('modal1')(); } },
                    { text: '购买', onPress: () => { this.buyBook() } },
                ]}
                wrapProps={{ onTouchStart: this.onWrapTouchStart }}
                >
                    <div style={{ height: 210, overflow: 'scroll' }}>
                        <div className="buy-info">
                            <div>你的余额:</div><div>{this.state.amount}饼干</div>
                        </div>

                        <div className="buy-info">
                            <div>价格:</div><div>{this.props.price}饼干</div>
                        </div>

                        <div className="buy-info">
                            <div>会员:</div><div>{this.props.vipPrice}饼干</div>
                        </div>


                        <div className="buy-info">
                            <div>你将花费:</div><div>{this.state.cost}饼干</div>
                        </div>

                        
                        <div onClick={(e)=>{this.toRecharge(e)}} className="buy-to">
                            <div className="to-recharge">去充值</div>
                        </div>
                        

                    </div>
                </Modal>


                <div onClick={this.showModal('modal1')} className="subscribe-button">
                    {text}
                </div>
            </div>
        );
    }
}

export default Subscribe;